---
import ModuleLayout from "@/components/Module/ModuleLayout/index.astro";
import RecentArticles from "./Module/RecentArticles.astro";
import PersonalInfo from "./Module/PersonalInfo/index.astro";
export interface Props {
  horizontal?: boolean;
}

const { horizontal } = Astro.props;
---

<div class={`blog_info ${horizontal ? "horizontal" : "vertical"}`}>
  <ModuleLayout horizontal={horizontal} title={"个人信息"}>
    <PersonalInfo horizontal={horizontal} />
  </ModuleLayout>
  <ModuleLayout horizontal={horizontal} title={"近期文章"}>
    <RecentArticles horizontal={horizontal} />
  </ModuleLayout>
</div>

<style lang="scss">
  .blog_info {
    width: 100%;

    &.horizontal {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      align-content: center;
      height: 13rem;
      margin: 1rem 0;
    }

    &.vertical {
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      align-items: center;
      align-content: center;
      width: 100%;
    }
  }

  @media screen and (max-width: 992px) {
    .blog_info {
      &.horizontal {
        height: unset;
      }
    }
  }
</style>
